/*
 * @Description: 
 * @Author: 邢
 * @Date: 2021-04-28 21:04:05
 * @LastEditTime: 2021-05-05 19:34:48
 * @LastEditors: 邢
 */
//知识笔记的html渲染组件
import React,{FC,useEffect,useRef} from 'react'
//引入高亮插件
import hljs from "highlight.js"

interface Iprops{
    str:string
}

const HeightLight:FC<Iprops> = function(props) {
    //实例化一个ref
    const divs = useRef(null)
    //监听props.str,改变重新获取里面需要高亮的元素
    useEffect(()=>{
        (divs.current as unknown as HTMLDivElement).querySelectorAll('pre code').forEach((block)=>{
            console.log("block",block);
            hljs.highlightBlock(block as HTMLDivElement)
        })
    },[props.str])
    return (
        <div dangerouslySetInnerHTML = {{__html:props.str}} ref={divs}></div>
    )
}
export default HeightLight
